<template>
    <div class="addr">
        <div class="head" v-if="type">
            <div class="toggle" :class="{select:isSelect}" @click="chooseWay(0)">订单发货</div>
            <div class="toggle" :class="{select:!isSelect}" @click="chooseWay(1)">到店自提</div>
        </div>
        <div class="con" v-show="isSelect" @click="turn('/address')">
            <div class="left">
                <div class="address">{{address.province+address.city+address.county+address.detail}}</div>
                <div class="per">{{address.userName}} <span>{{address.mobile}}</span></div>
            </div>
            <div class="right"><i class="cubeic-arrow"></i></div>
        </div>
        <div class="conSec" v-show="!isSelect">
            <div class="shopImg"><img :src="imgH+goods.shopAvatar"></div>
            <div class="right">
                <div class="shopName">提货门店：{{goods.shopName}}</div>
                <div class="shopAddr">{{goods.province+goods.city+goods.area+goods.shopAddress}}</div>
            </div>
        </div>
        <div class="getTime" v-show="!isSelect">
            <div class="title">联系电话</div>
            <div class="input"><input type="text" placeholder="请填写联系电话" :value="address.mobile" @input="onInput"/></div>
        </div>
    </div>
</template>

<script>
    import {showError} from "../../toast";

    export default {
        props:{
            address:null,
            type:Number,
            goods:{
                type:Object,
                default:()=>{
                    return{
                        shopAddress:null,
                        shopName:null,
                        shopAvatar:null
                    }
                }
            }
        },
        name: "index",
        data(){
            return{
                isSelect:true,
                imgH:process.env.VUE_APP_IMG_DOMAIN
            }
        },
        methods:{
            chooseWay(flag){
                if ((flag&&this.type==1)||!flag){
                    this.isSelect = !flag
                    this.$emit('changeType',flag)
                }else {
                    showError('请选择同一智慧门店商品单独下单')
                }
            },
            turn(path){
                this.$router.push({
                    path
                })
            },
            onInput(e) {
                this.$emit("changeMobile", e.target.value)
            }
        }
    }
</script>

<style scoped lang="stylus">
    .addr

        .head
            display flex
            .toggle
                height 30px
                line-height 30px
                flex 0.5
                text-align center
                background-color: #fff
                color #303333
                font-size 14px
                border-radius: 6px 6px 0px 0px
            .select
                background-color: #00C3BD
                color #F0FFFF
        .con
            display flex
            justify-content space-between
            padding 12px 15px
            background-color: #fff
            align-items center
            border-radius: 0px 0px 6px 6px
            .left
                flex 1
                width 250px
                .address
                    color #303333
                    width 250px
                    line-height 22px
                    white-space nowrap
                    text-overflow ellipsis
                    overflow hidden
                    word-break break-all
                    font-size 16px
                .per
                    margin-top 5px
                    color #606666
                    font-size 12px
                    line-height 17px
                    span
                        margin-left 10px
            .right
                font-size 20px
                color #606666
        .conSec
            padding 15px
            background-color: #fff
            display flex
            justify-content space-between
            .shopImg
                width: 70px
                height: 70px
                img
                    width: 70px
                    height: 70px
            .right
                width 240px
                .shopName
                    color #606666
                    font-size 14px
                    line-height 20px
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                    width 240px
                .shopAddr
                    width 240px
                    margin-top 6px
                    color #303333
                    font-size 16px
                    line-height 22px
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
        .getTime
            display flex
            height 44px
            justify-content space-between
            align-items center
            color #909999
            font-size 16px
            padding 0 15px
            background-color: #fff
            border-radius: 0px 0px 6px 6px;
            input
                text-align right
                font-size 16px
                outline none
                color #909999



</style>